<template>
    <div class="container">
        <el-row :gutter="20" class="row-content">
            <el-col :span="12" class="left-column">
                <div class="title">
                    文档协同
                </div>
                <div class="title">
                    知识管理
                </div>
                <div class="desc">
                    为每一个人，为每一个团队，提供优秀的文档与知识库工具
                </div>
            </el-col>

            <el-col :span="12" class="right-column">
                <div class="content" v-if="showLogo">
                    <!-- 这里放置右侧内容 -->
                    <img src="@/assets/vue.svg">
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script  lang="ts">
import { defineComponent } from 'vue';
// 组件逻辑保持不变
export default defineComponent({
  props: {
    showLogo: {
      type: Boolean,
      required: false,
      default: true,
    },
  },

  setup(props, { emit }) {
    // 返回所需的属性和方法
    return {
    };
  }
});

</script>

<style scoped>
.container {
    display: flex;
    justify-content: center; /* 居中对齐 */
    padding: 20px;
}

.row-content {
    width: 100%;
    max-width: 1200px; /* 可选：限制最大宽度 */
}

.left-column, .right-column {
    height: 100%; /* 确保左右两侧的高度一致 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中对齐 */
}

.title {
    font-family: 'Times New Roman', Times, serif;
    font-size: 50px;
    line-height: 1.2; /* 改善行间距 */
}

.desc {
    margin-top: 33px;
    color: #7f7f7f;
    font-weight: 600;
    font-size: 20px;
}

.content {
    width: 100%;
    /* min-height: 300px; */
    min-width: 200px;
     /* 设置最小高度，防止右侧内容为空时左侧变形 */
    /* background-color: #f9f9f9;  */
    /* 可选：添加背景颜色作为占位符 */
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>